
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<jsp:include page="common/header.jsp">
    <jsp:param name="title" value="首页"/>
</jsp:include>

<%--<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/index.css"/>--%>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.7.1.min.js"></script>
<script type="text/javascript">

    function initLinkStyles() {
        const status = new URLSearchParams(window.location.search).get('status') || '';
        document.getElementById('a1').style.color = (status === '') ? 'blue' : '#b3b7bb';
        document.getElementById('a2').style.color = (status === 'hottest') ? 'blue' : '#b3b7bb';
        document.getElementById('a3').style.color = (status === 'newest') ? 'blue' : '#b3b7bb';
    }

    // 页面加载时初始化
    window.onload = initLinkStyles;

    function allGoods(){
        document.getElementById("status").value=""

        window.location.href ="/shop/goods/showPage?&page=1"

}
    function hottest(){
        document.getElementById("status").value="hottest"

        window.location.href ="/shop/goods/showPage?status=hottest&page=1"

    }
    function newest(){
        document.getElementById("status").value="newest"

        window.location.href ="/shop/goods/showPage?status=newest&page=1"

    }

    function searchProducts() {
        var keyword = document.getElementById('searchInput').value;
        if (keyword.trim() !== '') {
            window.location.href = '${pageContext.request.contextPath}/product/search?keyword=' + encodeURIComponent(keyword);
        }
    }

    function addToCart(productId) {
        $.ajax({
            url: '${pageContext.request.contextPath}/cart/add',
            type: 'POST',
            data: {
                productId: productId,
                quantity: 1
            },
            success: function(response) {
                if (response.code === 200) {
                    alert('添加成功');
                } else {
                    alert(response.message);
                }
            },
            error: function() {
                alert('添加失败，请稍后重试');
            }
        });
    }


</script>

<c:url var="baseUrl" value="/goods/showPage">
    <c:param name="name" value="${param.name}"/>
    <c:param name="categoryId" value="${param.categoryId}"/>
    <c:param name="highestPrice" value="${param.highestPrice}"/>
    <c:param name="lowestPrice" value="${param.lowestPrice}"/>
    <c:param name="status" value="${param.status}"/>
</c:url>


<div class="search_form">
    <form action="/shop/goods/showPage" method="get">
        <table class="form_table" cellpadding="0" cellspacing="0">
            <tr>
                <input name="status" id="status" type="hidden"  value="${param.status}">
                <th>商品名称：</th>
                <td><input class="normal" name="name" type="text" value="${param.name}"></td>

                <th>最低价格</th>
                <td>
                    <input class="normal" name="lowestPrice" type="number" value="${param.lowestPrice}">
                </td>

                <th>最高价格</th>
                <td>
                    <input class="normal" name="highestPrice" type="number" value="${param.highestPrice}">
                </td>

                <th>分类：</th>
                <td>
                    <select name="categoryId">
                        <option value="" >全部</option>
                        <c:forEach items="${categoryList}" var="cat">
                            <option value="${cat.id}" ${param.categoryId eq cat.id ? 'selected' : ''}>
                                    ${cat.name}
                            </option>
                        </c:forEach>
                    </select>
                </td>

                <td>
                    <button class="submit" type="submit">
                        <span>搜索</span>
<%--                        <a href="${baseUrl}&page=1">搜索</a>--%>
                    </button>
                </td>
            </tr>
        </table>
    </form>
</div>

<!-- 轮播图区域 -->
<%--<div class="slider-section">--%>
<%--    <div class="slider">--%>
<%--        轮播图区域--%>
<%--    </div>--%>
<%--</div>--%>

<!-- 热门商品区域 -->


<div class="hot-products">
    <h2>
        <a id="a1"  href="javascript:void(0);"
           onclick="allGoods()">全部商品</a>
        <a id="a2" style="color: #b3b7bb" href="javascript:void(0);"
           onclick="hottest()">热门商品</a>
        <a id="a3" style="color: #b3b7bb" href="javascript:void(0);"
           onclick="newest()">新品上架 </a>
    </h2>

    <div class="main f_l">
        <!--最新商品-->
        <div class="box yellow m_10">

            <div class="cont clearfix">
                <ul class="prolist">
                    <c:forEach items="${goodsList}" var="goods" end="13">
                        <li style="overflow:hidden"><a href="/shop/goods/${goods.id}" target="_blank"><img src="${goods.image}" width="175" height="175" alt=""></a>
                            <p class="pro_title">
                                <a title="" href="/${goods.id}">${goods.name}</a>
                            </p>
                            <p class="brown">
                                惊喜价：<b>${goods.salePrice}</b>
                            </p>
                            <p class="light_gray">
                                市场价：<s>${goods.marketPrice}</s>
                            </p></li>
                    </c:forEach>


                </ul>
            </div>
        </div>
        <!-- 分页组件 -->
        <div class="pagination-container">
            <div class="pagination">
                <c:forEach begin="1" end="${pageTotal}" var="page">
                    <a href="${baseUrl}&page=${page}" class="pagination-item ${currentPage == page ? 'active' : ''} ">${page}</a>
                </c:forEach>


            </div>
        </div>
    </div>


<!-- 新品上架区域 -->
<%--<div class="new-products">--%>
<%--    <h2>新品上架</h2>--%>
<%--    <div class="product-grid">--%>
<%--        新品上架区域--%>
<%--    </div>--%>
<%--</div>--%>

<!-- 页面脚本 -->

<!-- 页面样式 -->
<style>
    .search_form {
        margin-bottom: 20px;
        padding: 15px;
        background-color: #f9f9f9;
        border-radius: 5px;
    }
.search-section {
    padding: 20px 0;
    background: #f8f8f8;
    text-align: center;
}

.search-box {
    margin-bottom: 15px;
}

.search-box input {
    width: 300px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.search-btn {
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.category-nav {
    margin-top: 10px;
}

.category-nav a {
    margin: 0 10px;
    color: #333;
    text-decoration: none;
}

.slider-section {
    margin: 20px 0;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.product-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
}

.product-image img {
    max-width: 100%;
    height: auto;
}

.product-info h3 {
    margin: 10px 0;
    font-size: 16px;
}

.price {
    color: #f00;
    font-size: 18px;
    font-weight: bold;
}

.sales {
    color: #666;
    font-size: 12px;
}

.add-to-cart {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

.add-to-cart:hover {
    background: #0056b3;
}

h2 {
    margin: 20px 0;
    padding-left: 20px;
    border-left: 4px solid #007bff;
}





    .form_table {
        float: left;
        width: 100%;
        margin-top: 10px;
        table-layout: fixed;
    }

    .form_table th {
        padding: 5px 8px 5px 0;
        border-bottom: 1px solid #fff;
        color: #333333;
        font-weight: bold;
        text-align: right;
        white-space: nowrap;
        background-color: #f9f9f9;
    }

    .form_table th.title {
        padding-left: 10px;
        text-align: left
    }

    .form_table td {
        padding: 6px 0 5px 10px;
        text-align: left;
        color: #717171;
        line-height: 200%
    }

    .form_table label {
        margin-left: 10px;
        padding: 7px 0 0
    }

    .form_table label.attr {
        color: #1d1d1d
    }

    .form_table label input {
        margin-right: 5px;
        vertical-align: middle
    }

    .form_table textarea {
        width: 465px;
        height: 65px;
        padding: 0 0 0 5px;
        font-size: 12px;
        color: #333;
        border: 1px #d2d2d2 solid;
        line-height: 24px
    }

    .form_table textarea.big {
        width: 465px;
        height: 350px;
    }

    .form_table .pic {
        float: left; /*width:65px;height:90px;*/
        margin-right: 10px;
        text-align: center
    }

    .form_table .pic img {
        border: 3px #efefed solid;
        cursor: pointer
    }

    .form_table .pic img.current {
        border: 3px #f60 solid
    }

    .form_table	img.photo {
        max-width: 750px;
        height: auto;
        width: 100%;
        max-width: 750px;
    }

    input.normal {
        height: 22px;
        line-height: 22px;
        padding-left: 5px;
        width: 255px;
        border: 1px #d7d7d7 solid;
        margin-right: 5px
    }

    input.middle {
        height: 22px;
        line-height: 22px;
        padding-left: 5px;
        width: 210px;
        border: 1px #d7d7d7 solid;
        margin-right: 5px
    }

    input.small {
        height: 22px;
        line-height: 22px;
        padding-left: 5px;
        width: 100px;
        border: 1px #d7d7d7 solid;
        margin-right: 5px;
        _margin-bottom: -1px;
    }

    input.tiny {
        height: 18px;
        line-height: 18px;
        padding-left: 5px;
        width: 45px;
        border: 1px #d7d7d7 solid;
        margin: 2px 5px 2px 0
    }

    input.file {
        height: 22px;
        line-height: 22px;
        padding-left: 5px;
        border: 1px #d7d7d7 solid
    }

    input.readonly {
        background-color: #f5f5f5;
    }



    .pagination-container {
        display: flex;
        justify-content: center;
        margin: 30px 0;
        font-family: Arial, sans-serif;
    }

    .pagination {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 10px 20px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .pagination-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0 5px;
        border-radius: 4px;
        text-decoration: none;
        color: #333;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .pagination-item:hover {
        background-color: #f0f0f0;
        color: #000;
    }

    .pagination-item.active {
        background-color: #007bff;
        color: #fff;
    }

    .pagination-item.dots {
        cursor: default;
    }

    .pagination-item.dots:hover {
        background-color: transparent;
    }

    .pagination-item i {
        font-size: 12px;
    }

    .pagination-item.first-page,
    .pagination-item.last-page {
        width: 35px;
    }

    .pagination-item.prev-page,
    .pagination-item.next-page {
        width: 35px;
    }

    .pagination-item.disabled {
        color: #ccc;
        cursor: not-allowed;
        pointer-events: none;
        background-color: #f5f5f5;
    }

    .pagination-item.disabled:hover {
        background-color: #f5f5f5;
        color: #ccc;
    }

    .pagination-item.disabled i {
        color: #ccc;
    }

    @media (max-width: 768px) {
        .pagination {
            padding: 8px 15px;
        }

        .pagination-item {
            width: 35px;
            height: 35px;
            margin: 0 3px;
            font-size: 13px;
        }
    }



    /* 优化后的紧凑样式 */
    .box.yellow {
        background: #fff9eb;
        border-radius: 8px;
        padding: 15px;
        margin: 10px;
    }

    .prolist {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 12px;
        padding: 0;
    }

    .prolist li {
        background: white;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid #f0f0f0;
        transition: transform 0.15s;
    }

    .prolist li:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    /* 图片区域调整 */
    .prolist img {
        width: 100%;
        height: 160px;  /* 降低图片高度 */
        object-fit: cover;
        border-bottom: 1px solid #eee;
    }

    /* 文字信息紧凑布局 */
    .pro_title {
        padding: 8px 6px 4px;
        margin: 0;
        line-height: 1.3;
    }

    .pro_title a {
        font-size: 13px;  /* 缩小字体 */
        color: #333;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 34px;  /* 固定标题高度 */
        overflow: hidden;
    }

    /* 价格区域紧凑排版 */
    .brown {
        padding: 4px 6px;
        margin: 0;
        font-size: 16px;  /* 缩小价格字体 */
        color: #e4393c;
    }

    .light_gray {
        padding: 0 6px 6px;
        margin: 0;
        font-size: 11px;  /* 缩小原价字体 */
    }

    /* 响应式调整 */
    @media (max-width: 1600px) {
        .prolist {
            grid-template-columns: repeat(6, 1fr);
            gap: 10px;
        }
        .prolist img {
            height: 150px;
        }
    }

    @media (max-width: 1366px) {
        .prolist {
            grid-template-columns: repeat(5, 1fr);
        }
    }

</style>

<%--<%@ include file="common/footer.jsp" %>--%>
